<template>
  <div>
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="searchForm.gender" placeholder="性别">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

      <!-- 时间区间 -->
      <el-form-item label="入职日期">
        <el-date-picker
          v-model="searchForm.entrydate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"

        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>


    <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="image" label="图像" width="180">
            <!-- 模版+scope -->
            <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="100px">
            </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="140" >
             <template slot-scope="scope">
                {{scope.row.gender == 1 ? '男' : '女'}}
             </template>
        </el-table-column>
        <el-table-column prop="job" label="职位" width="140">
        </el-table-column>
        <el-table-column prop="entrydate" label="入职日期" width="180">
        </el-table-column>
        <el-table-column prop="updatetime" label="最后操作时间" width="230">
        </el-table-column>
         <el-table-column label="操作">
            <el-button size="mini">编辑</el-button>
            <el-button size="mini">删除</el-button>
        </el-table-column>

      </el-table>

    <!-- 分页 -->
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 15, 20, 25]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
</template>

<script>
//引入axios
import axios from "axios";
export default {
  name: "EmpView",
  data() {
    return {
      //搜索框的数据
      searchForm: {
        name: "",
        gender: "",
        entrydate:[]//开始时间与结束时间
      },
      //表格数据
      tableData:[],
      //分页相关
      pageSize:5,
      currentPage:1,
      total:50


    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
  //页面挂载完成执行初始化操作
  mounted(){
    axios.get('http://localhost:10010/emp/list').then((resp) => {
        console.log(resp.data.data);
        //表格的数据=查询回来的集合数据
        this.tableData = resp.data.data;
    });
  }
};
</script>

<style>
</style>